<table mat-table [dataSource]="rows$ | async">
  <ng-container matColumnDef="clientId">
    <th mat-header-cell *matHeaderCellDef>Client ID</th>
    <td mat-cell *matCellDef="let element">{{ element.clientId }}</td>
  </ng-container>

  <ng-container matColumnDef="fqdn">
    <th mat-header-cell *matHeaderCellDef>FQDN</th>
    <td mat-cell *matCellDef="let element">{{ element.fqdn || '-' }}</td>
  </ng-container>

  <ng-container matColumnDef="lastSeenAt">
    <th mat-header-cell *matHeaderCellDef>Last Seen At</th>
    <!-- TODO(user): implement a dedicated pipe or/and a component for
         dates rendering (with changeable timezone stored in the global
         store). -->
    <td mat-cell *matCellDef="let element">
      {{ element.lastSeenAt ? (element.lastSeenAt | date:'short':'UTC') : '-' }}
    </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="columns"></tr>
  <tr mat-row *matRowDef="let row; columns: columns"
      [routerLink]="['/v2/clients/', row.clientId]"></tr>
</table>
